<template>
  <div class="button-group">
    <van-button :type="getButtonType(useDoWhat)" :disabled="disabled">
      {{ buttonText }}
    </van-button>
  </div>
</template>

<script>
import { Button } from 'vant';

export default {
    name: 'button-widget',
    props: {
        useDoWhat: {
            type: String,
            required: true,
            validator: function (value) {
                return value === 'cancel' || value === 'update';
            }
        },
        buttonText: {
            type: String,
            required: true
        },
        disabled: {
            type: Boolean,
            default: false
        }
    },
    components: {
        [Button.name]: Button
    },
    computed: {
        getButtonType () {
            return function (value) {
                return value === 'cancel' ? 'danger' : 'info';
            };
        }
    }
};
</script>

<style scoped lang="less" src="./button-widget.less"></style>
